<!--
 * @Author: xialang333@gmail.com
 * @Date: 2024-07-11 15:19:53
 * @LastEditTime: 2024-08-02 11:04:28
-->
<template>
    <base-dialog  v-model="dialogVisible" :title="loadingTitle" width="50%"  :before-close="handleClose"
      @click="checkFullScreen"
      draggable>
        <Ly-Xterm
            ref="Refxterm"
            :fontSize="15"
            :wsuri="websocketUrl"
            style=" overflow:hidden;height: 100%;width: 100% "
        ></Ly-Xterm>
    </base-dialog>
  </template>
  <script>
  import {vue,nexTick,ref} from "vue"
  import LyXterm from "@/components/terminal/xterm";
  import BaseDialog from "@/components/dialog/dialog";
  export default {
    name: "xtermDialog",
    components: {
      LyXterm,
      BaseDialog
    },
    data() {
      return {
        dialogVisible: false,
        loadingTitle: "",
        websocketUrl: ""
      };

    },
    methods: {
      checkFullScreen() {
        this.$refs.Refxterm.listenResize()
      },
      show(obj) {

        this.websocketUrl = obj.websocketUrl
        this.dialogVisible = true;
        this.loadingTitle = obj.host
      },
      handleClose(){
        this.dialogVisible = false;
        this.loadingTitle = ""
        this.$refs.Refxterm.stopconnect()
      }
    }
  }
  </script>

  
<style lang="scss" scoped>
    .xterm-screen {
        min-height: calc(100vh);
        min-width: calc(100vh);
    }
    .xtermbox {
        width: 100%;
        height: 100%;
        background: black;
        .lyxterm{
            width: 100%;
            height: 100%;
        }
    }
    .xterm {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
</style>
